<template>
  <el-dialog :title="params.id?'修改todo':'添加Todo'" :visible="visible" width="50%" :before-close="beforeClose">
    <el-form ref="form" :model="params" label-width="80px" :rules="rules">
      <el-form-item label="标题" prop="title">
        <el-input v-model="params.title" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item label="截止时间" prop="date">
        <el-date-picker v-model="params.date" style="width:100%" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="内容" prop="main">
        <el-input type="textarea" autosize v-model="params.main" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="说明" prop="info">
        <el-input v-model="params.info" placeholder="请输入说明"></el-input>
      </el-form-item>
      <el-form-item label="任务属性" prop="tags">
        <div>
          <el-input v-model="keyTag" placeholder="回车添加属性">
            <el-button slot="append" @click="onKeyDown">添加属性</el-button>
          </el-input>
        </div>
        <div>
          <el-tag @close="onClosable(t.id)" closable style="margin-right:10px;" v-for="(t,index) in params.tags" :key="index" size="small">{{t.name}}</el-tag>
        </div>
      </el-form-item>
      <el-form-item label="进度" prop="pro">
        <el-slider :min="0" :max="100" v-model="params.pro"></el-slider>
      </el-form-item>
      <el-form-item label="重要程度" prop="degree">
        <el-radio-group v-model="params.degree">
          <el-radio :label="1">普通任务</el-radio>
          <el-radio :label="2">重要任务</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="beforeClose">取 消</el-button>
      <el-button type="primary" @click="onSubmit">{{params.id?'立即修改':'立即创建'}}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { DBTodo} from '@/db'
export default {
  name: 'AddTodo',
  props:{
      visible:{
          type:Boolean,
          default:false
      },
      id:Number
  },
  data() {
    return {
      keyTag:"",  
      params: this.initData(),
      rules:{
        title: { required: true, message: '请输入标题', trigger: 'blur' },
        date: { required: true, message: '请输入选择时间', trigger: 'change',type:"array" },
        main: { required: true, message: '请输入内容', trigger: 'blur' }
      }
    }
  },
  computed:{
      getDate(){
          return [this.params.startDate,this.params.endDate]
      }
  },
  watch:{
      id(val){
          if(val!==0){
              const todo = DBTodo.getTodo(val)
              if(todo){
                  this.params = Object.assign(this.params,{
                      ...todo,
                      date:[new Date(todo.startTime),new Date(todo.endTime)]
                  })
              }
          }
      }
  },
  methods: {
    initData() {
      return {
        id: '',
        title:"",
        date:"",
        main:"",
        info:"",
        tags:[],
        pro:0,
        degree:1,
        type:0,//0 未完成  1完成
      }
    },
    beforeClose(done){
        this.$emit('update:visible',false)
        this.keyTag = ""
        this.params = this.initData()
        this.$nextTick(()=>this.$refs.form.clearValidate())
        this.$emit('hide')
    },
    async onSubmit(){
        let result = await this.$refs.form.validate();
        if (!result) return;
        if(this.params.id){
            return this.onUpdate()
        }
        this.onAdd()
    },
    onClosable(tid){
        const tags = this.params.tags
        this.params.tags = tags.filter(t=>t.id!==tid)
    },
    onUpdate(){
        this.$store.commit('todo/UPDATE_TODO',{
            ...this.params,
            date:"",
            startTime:+this.params.date[0],
            endTime:+this.params.date[1],
            createTime:+new Date(),
        })
        this.$message({
            message: '修改成功！',
            type: 'success'
        });
        this.beforeClose()
    },
    onAdd(){
        this.$store.commit('todo/ADD_TODO',{
            ...this.params,
            date:"",
            startTime:+this.params.date[0],
            endTime:+this.params.date[1],
            createTime:+new Date(),
            id:+new Date(),
        })
        this.$message({
            message: '添加成功！',
            type: 'success'
        });

        this.beforeClose()
    },
    onKeyDown(){
        if(this.keyTag){
            this.params.tags.push({
                id:+new Date(),
                name:this.keyTag
            })
            this.keyTag = ""
        }
    }
  }
}

</script>

<style>
</style>
